<template>
  <el-row :gutter="20">
    <div class="toolbar">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <kt-button icon="fa fa-edit" :label="$t('action.appPermission')" :perms="permsEdit" 
      type="primary" @click="handleEdit(scope.$index, scope.row)" />
    </div>
    <el-checkbox-group v-model="checkedApps" @change="handleCheckedChange">
      <el-col :span="3" v-for="o in appData" :key="o.value">
        <el-card :body-style="{ padding: '0px'}" shadow="hover" class="card">
          <img src="@/assets/images/user.png" class="image">
          <el-checkbox :label="o.value" class="checkbox">
            <div class="title">{{o.name}}</div>
          </el-checkbox>
        </el-card>
      </el-col>
    </el-checkbox-group>
  </el-row>
</template>

<script>
import KtButton from "@/views/Core/KtButton"
export default {
  name: "KtCheckboxCard",
  components:{
      KtButton
  },
  props: {
		permsEdit: String,  // 编辑权限标识
	},
  data() {
    return {
      checkAll: false,
      isIndeterminate: true,
      checkedApps: [1, 3, 4],
      allApps: [1,2,3,4,5,6,7,8,9],
      appData: [
        { 'name': '1应用', 'value': 1},
        { 'name': '2应用', 'value': 2},
        { 'name': '3应用', 'value': 3},
        { 'name': '4应用', 'value': 4},
        { 'name': '5应用', 'value': 5},
        { 'name': '6应用', 'value': 6},
        { 'name': '7应用77777777777777777777777777777777!', 'value': 7},
        { 'name': '8应用', 'value': 8},
        { 'name': '9应用', 'value': 9}
      ],
    };
  },
  methods: {
    // 编辑
		handleEdit: function (index, row) {

    },
    handleCheckAllChange(value) {
      this.checkedApps = value ? this.allApps : [];
      this.isIndeterminate = false;
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.checkedApps.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.allApps.length;
      console.log(this.checkedApps);
    }
  }
};
</script>

<style scoped lang="scss">
.image {
  height: 50px;
}
.toolbar {
  text-align: left;
  margin-left: 18px;
  margin-bottom: 20px;
}
.toolbar label {
  margin-right: 30px;
}
.card {
  text-align: left;
  margin-bottom: 20px;
  position: relative;
}
.title {
  padding: 3px 3px 3px 46px;
  word-wrap: break-word;
  overflow: hidden;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.checkbox {
  position: absolute;
  left: 0;
  width:100%;
  height: 100%;
}
.checkbox /deep/ .el-checkbox__input {
  top: 0;
  position: absolute;
}
.checkbox /deep/ .el-checkbox__label {
  display: block;
}
</style>
